<template>
  <div class="app-container">
    <div class="filter-container">
<!--      <el-input v-model="listQuery.nickName" size="medium" placeholder="昵称" clearable style="width: 160px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
      <el-input v-model="listQuery.realName" size="medium" placeholder="真实姓名" clearable style="width: 160px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.phone" size="medium" placeholder="手机号" clearable style="width: 160px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.idNumber" size="medium" placeholder="身份证号" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.userType" size="medium" placeholder="用户身份" clearable class="filter-item" style="width: 110px">
        <el-option :key="0" label="民警" :value="0" />
        <el-option :key="1" label="辅警" :value="1" />
        <el-option :key="2" label="退休/离职" :value="2" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" size="medium" icon="el-icon-search" @click="handleFilter">
        筛选
      </el-button>
      <el-button v-waves class="filter-item" type="primary" size="medium" icon="el-icon-download" style="float: right" @click="handleExport">
        导出
      </el-button>
      <el-button v-waves class="filter-item" type="primary" size="medium" icon="el-icon-finished" style="float: right" @click="handleImport">
        批量处理
      </el-button>
      <el-button v-waves class="filter-item" type="success" size="medium" icon="el-icon-plus" style="float: right" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      max-height="695"
      :cell-style="{'padding-top':'8px', 'padding-bottom':'8px'}"
      highlight-current-row
      style="width: 100%;"
      :row-style="{height:'32px'}"
      :default-sort="{prop: 'userId', order: null}"
      @sort-change="sortChange"
    >
      <el-table-column label="ID" align="center" fixed prop="userId" sortable="custom" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" width="90px">
        <template slot-scope="{row}">
          <img v-if="row.headImg" :src="row.headImg" class="user-avatar">
        </template>
      </el-table-column>
<!--      <el-table-column label="昵称" align="center" width="110px" show-overflow-tooltip>-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.nickName }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="真实姓名" align="center" width="110px">
        <template slot-scope="{row}">
          <span>{{ row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" width="150px">
        <template slot-scope="{row}">
          <span v-if="row.phone">{{ row.phone }}</span>
          <el-tag v-else size="mini" effect="plain" type="info">暂无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center" width="180px">
        <template slot-scope="{row}">
          <span v-if="row.idNumber">{{ row.idNumber }}</span>
          <el-tag v-else size="mini" effect="plain" type="info">暂无</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户身份" align="center" prop="userType" sortable="custom" width="110px">
        <template slot-scope="{row}">
          <el-tag v-if="row.userType===0" effect="dark" type="primary" size="mini">民警</el-tag>
          <el-tag v-else-if="row.userType===1" effect="dark" type="success" size="mini">辅警</el-tag>
          <el-tag v-else effect="dark" type="info" size="mini">退休/离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="实名认证" align="center" prop="verify" sortable="custom" width="110px">
        <template slot-scope="{row}">
          <el-tag v-if="row.verify===1" type="success" size="mini">已认证</el-tag>
          <el-tag v-else type="info" size="mini">未认证</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="冻结状态" align="center" prop="block" sortable="custom" width="110px">
        <template slot-scope="{row}">
          <el-tag v-if="row.block===0" type="success" size="mini">正常</el-tag>
          <el-tag v-else type="info" size="mini">冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="经验值" align="center" prop="experience" sortable="custom">
        <template slot-scope="{row}">
          <span>{{ row.experience }}</span>
        </template>
      </el-table-column>
      <el-table-column label="积分值" align="center" prop="integral" sortable="custom">
        <template slot-scope="{row}">
          <span>{{ row.integral }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近修改时间" align="center" prop="updateTime" sortable="custom">
        <template slot-scope="{row}">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="310px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handlePassword(row.userId)">
            密码
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button v-if="row.block==0" size="mini" type="info" @click="handleBlock(row)">
            冻结
          </el-button>
          <el-button v-if="row.block==1" size="mini" type="success" @click="handleBlock(row)">
            解冻
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row.userId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-size.sync="listQuery.pageSize" @pagination="showUsersList" />

    <el-dialog title="批量处理" :visible.sync="dialogImportVisible" width="630px">
      <el-form label-width="120px" style="width: 90%">
        <div style="font-size: 10px; margin-bottom: 20px">
          <el-row :gutter="20" style="margin: 0">
            <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">* 增量导入</p></el-col>
            <el-col :span="18"><p style="color: #787777">上传新增的用户名单，进行批量导入</p></el-col>
          </el-row>
          <el-row :gutter="20" style="margin: 0">
            <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">* 全员比对</p></el-col>
            <el-col :span="18"><p style="color: #787777">上传全员用户名单，与数据库信息进行对比，自动导入新增用户，并导出减少的用户名单</p></el-col>
          </el-row>
          <el-row :gutter="20" style="margin: 0">
            <el-col :span="6" style="text-align: right"><p style="font-weight: bolder">* 离职退休</p></el-col>
            <el-col :span="18"><p style="color: #787777">上传[全员比对]后导出的离职/退休用户名单，批量将用户设为离职/退休</p></el-col>
          </el-row>
        </div>
        <el-form-item label="模板示例">
          <el-link target="_blank" :href="exampleExcelUrl" :underline="false">
            <el-button plain size="mini" icon="el-icon-download">下载</el-button>
            <div class="el-upload__tip">请严格按照模板格式编辑文件，不得有空行或多余单元格存在</div>
          </el-link>
        </el-form-item>
        <el-form-item label="上传名单">
          <el-input v-model="filePathTemp" placeholder="Excel文件位置" style="display: none" />
          <excel-upload-single ref="excelUpload" @onUpload="uploadExcel" @onRemove="removeExcel" />
        </el-form-item>
        <el-form-item label="选择分局">
          <el-select v-model="tmpOperateDepartmentId" placeholder="请选择" clearable class="filter-item" style="width: 200px">
            <el-option v-for="item in departmentList" :key="item.key" :label="item.value" :value="item.key" :disabled="item.disabled" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" size="small" @click="doImport()">
          增量导入
        </el-button>
        <el-button type="danger" size="small" @click="doLeave()">
          离职退休
        </el-button>
        <el-button type="primary" size="small" @click="doCompare()">
          全员比对
        </el-button>
        <el-button size="small" @click="dialogImportVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="用户导出" :visible.sync="dialogExportVisible" width="450px">
      <el-form label-width="120px" style="width: 90%">
        <el-form-item label="选择分局">
          <el-select v-model="tmpOperateDepartmentId" placeholder="请选择" clearable class="filter-item" style="width: 200px">
            <el-option v-for="item in departmentList" :key="item.key" :label="item.value" :value="item.key" :disabled="item.disabled" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="doExport(tmpOperateDepartmentId)">
          确认导出
        </el-button>
        <el-button size="small" @click="dialogExportVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="35%">
      <el-form ref="dataForm" :rules="rules" :model="dataFormTemp" label-width="100px" style="width: 480px; margin-left:50px;">
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="dataFormTemp.realName" />
        </el-form-item>
        <el-form-item label="所属分局" prop="departmentId">
          <el-select v-model="dataFormTemp.departmentId" placeholder="请选择" clearable class="filter-item" style="width: 180px">
            <el-option v-for="item in departmentList" :key="item.key" :label="item.value" :value="item.key" :disabled="item.disabled" />
          </el-select>
        </el-form-item>
        <el-form-item label="职务身份" prop="userType">
          <el-radio v-model="dataFormTemp.userType" :label="0">民警</el-radio>
          <el-radio v-model="dataFormTemp.userType" :label="1">辅警</el-radio>
          <el-radio v-model="dataFormTemp.userType" :label="2">退休/离职</el-radio>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="dataFormTemp.phone" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="dataFormTemp.idNumber" />
          <div class="el-upload__tip">若无需更改身份证号时，请勿改动该字段！</div>
          <div class="el-upload__tip">若需要更改时，请输入完整身份证号，以免影响数据唯一性！</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="重置密码" :visible.sync="dialogPwdVisible" width="35%">
      <el-form ref="pwdForm" :rules="pwdRules" :model="pwdTemp" label-width="120px" style="width: 70%; margin-left:50px;">
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="pwdTemp.pwd" show-password />
        </el-form-item>
        <el-form-item label="再次输入密码" prop="repeatPwd">
          <el-input v-model="pwdTemp.repeatPwd" show-password />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPwdVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="changePassword()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { showUsersList, toggleFreeze, changePassword, saveOrUpdateUsers, deleteUser } from '@/api/users'
import { importUsersByExcel, compareUsersByExcel, leaveUsersByExcel, exportUsersToExcel } from '@/api/users'
import { roundPrice } from '@/utils/common'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import ExcelUploadSingle from '@/components/ImgUpload/ExcelUploadSingle'
import { isPassword } from '@/utils/validate'
import rsaEncrypt from '@/utils/rsa'

export default {
  name: 'Users',
  components: { Pagination, ExcelUploadSingle },
  directives: { waves },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不得少于6位！'))
      } else {
        callback()
      }
    }
    const validateRepeat = (rule, value, callback) => {
      if (value !== this.pwdTemp.pwd) {
        callback(new Error('两次输入的密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      dialogLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        departmentId: '',
        nickName: '',
        realName: '',
        phone: '',
        idNumber: '',
        userType: ''
      },
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      dataFormTemp: {
        userId: undefined,
        realName: '',
        phone: '',
        idNumber: '',
        userType: '',
        departmentId: ''
      },
      filePathTemp: '',
      pwdTemp: {
        userId: undefined,
        pwd: '',
        repeatPwd: ''
      },
      tmpOperateDepartmentId: '',
      dialogFormVisible: false,
      dialogImportVisible: false,
      dialogExportVisible: false,
      dialogPwdVisible: false,
      exampleExcelUrl: 'http://qinajia-life.oss-cn-hangzhou.aliyuncs.com/picture/22f08606-f0c5-4b64-85cc-a69f0c295466.xlsx',
      progressMap: {
        0: '未支付',
        1: '已支付',
        2: '已关闭'
      },
      activeTab: 'recharge',
      rules: {
        realName: [{ required: true, message: '请填写用户真实姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请填写用户手机号', trigger: 'blur' }],
        idNumber: [{ required: true, message: '请填写用户身份证号', trigger: 'blur' }],
        userType: [{ required: true, message: '请选择用户职务', trigger: 'change' }],
        departmentId: [{ required: true, message: '请选择用户所属分局', trigger: 'change' }]
      },
      pwdRules: {
        pwd: [{ required: true, trigger: 'blur', validator: validatePassword }, { validator: isPassword, trigger: 'blur' }],
        repeatPwd: [{ required: true, trigger: 'blur', validator: validateRepeat }]
      }
    }
  },
  computed: {
    departmentId() {
      return this.$store.state.user.departmentId
    },
    departmentList() {
      const originList = this.$store.getters.departmentList
      const tmpList = Object.assign([], originList)
      tmpList.splice(0, 1)
      if (this.departmentId === 0) {
        tmpList.forEach(d => {
          d.disabled = false
        })
      } else {
        tmpList.forEach(d => {
          d.disabled = d.key !== this.departmentId
        })
      }
      return tmpList
    }
  },
  created() {
    this.showUsersList()
  },
  methods: {
    showUsersList() {
      this.listLoading = true
      this.listQuery.departmentId = this.$store.getters.tmpDepartmentId
      showUsersList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.showUsersList()
    },
    sortChange(data) {
      const { prop, order } = data
      this.listQuery.sortProp = prop
      if (order === 'ascending') {
        this.listQuery.sortOrder = '1'
      } else {
        this.listQuery.sortOrder = '-1'
      }
      this.handleFilter()
    },
    resetFormDialog() {
      this.dataFormTemp = {
        userId: undefined,
        realName: '',
        phone: '',
        idNumber: '',
        userType: '',
        departmentId: ''
      }
    },
    handleCreate() {
      this.resetFormDialog()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveOrUpdateUsers(this.dataFormTemp).then(() => {
            this.showUsersList()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '新增用户成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleUpdate(row) {
      this.resetFormDialog()
      this.dataFormTemp.userId = row.userId
      this.dataFormTemp.realName = row.realName
      this.dataFormTemp.idNumber = row.idNumber
      this.dataFormTemp.phone = row.phone
      this.dataFormTemp.userType = row.userType
      this.dataFormTemp.departmentId = row.departmentId
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveOrUpdateUsers(this.dataFormTemp).then(() => {
            this.showUsersList()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '修改用户成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    resetPwdDialog() {
      this.pwdTemp = {
        userId: undefined,
        pwd: '',
        repeatPwd: ''
      }
    },
    handlePassword(userId) {
      this.resetPwdDialog()
      this.pwdTemp.userId = userId
      this.dialogPwdVisible = true
    },
    changePassword() {
      this.$refs['pwdForm'].validate((valid) => {
        if (valid) {
          const passwordEncrypt = rsaEncrypt(this.pwdTemp.pwd)
          const data = {
            userId: this.pwdTemp.userId,
            pwd: passwordEncrypt
          }
          changePassword(data).then(() => {
            this.showUsersList()
            this.dialogPwdVisible = false
            this.$notify({
              title: 'Success',
              message: '重置密码成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleBlock(row) {
      var text = ''
      console.log(row.block)
      if (row.block == 0) {
        text = '冻结后用户将无法登录App，是否继续?'
      } else {
        text = '是否确认取消冻结用户?'
      }
      this.$confirm(text, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        toggleFreeze({ userId: row.userId, block: row.block }).then(() => {
          this.showUsersList()
          this.$notify({
            title: 'Success',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {})
    },
    handleDelete(userId) {
      this.$confirm('此删除操作不可逆，请确认是否要删除该用户账号?', '提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(userId).then(() => {
          this.showUsersList()
          this.$notify({
            title: 'Success',
            message: '删除用户账号成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    handleImport() {
      this.filePathTemp = ''
      this.dialogImportVisible = true
    },
    doImport() {
      if (!this.tmpOperateDepartmentId) {
        this.$message({
          message: '请先选择要批量操作的分局！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      const filePath = this.filePathTemp
      if (filePath == '' || filePath === null || filePath === undefined) {
        this.$message({
          message: '导入失败，请重新上传文件后再点击导入！',
          type: 'error',
          duration: 2000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '数据处理中，请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 15000)
      importUsersByExcel(filePath, this.tmpOperateDepartmentId).then((response) => {
        loading.close()
        this.showUsersList()
        const res = response.data
        this.$notify({
          title: 'Success',
          dangerouslyUseHTMLString: true,
          message: '<p>本次导入数据比对结果为：</p>' +
            '<p>新增用户 ' + res.addingSize + ' 人</p>' +
            '<p>恢复用户 ' + res.recoveringSize + ' 人</p>',
          type: 'success',
          duration: 0
        })
        window.setTimeout(() => {
          if (res.addingResult === 0) {
            if (res.addingSize <= 0) {
              this.$notify({
                title: '新用户导入情况',
                message: '无需导入新用户',
                type: 'success',
                duration: 0
              })
            } else {
              this.$notify({
                title: '新用户导入情况',
                message: res.addingMsg,
                type: 'warning',
                duration: 0
              })
            }
          } else {
            this.$notify({
              title: '新用户导入情况',
              message: '已导入' + res.addingSize + '名新用户',
              type: 'success',
              duration: 0
            })
          }
        }, 0)
      })
    },
    doCompare() {
      if (!this.tmpOperateDepartmentId) {
        this.$message({
          message: '请先选择要批量操作的分局！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      const filePath = this.filePathTemp
      if (filePath == '' || filePath === null || filePath === undefined) {
        this.$message({
          message: '比对失败，请重新上传文件后再点击比对',
          type: 'error',
          duration: 2000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '数据处理中，请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 15000)
      compareUsersByExcel(filePath, this.tmpOperateDepartmentId).then((response) => {
        loading.close()
        this.showUsersList()
        const res = response.data
        this.$notify({
          title: '比对结果',
          dangerouslyUseHTMLString: true,
          message: '<p>本次名单与数据库信息对比：</p>' +
            '<p>新增用户 ' + res.addingSize + ' 人</p>' +
            '<p>恢复用户 ' + res.recoveringSize + ' 人</p>' +
            '<p>减少用户 ' + res.removingSize + ' 人</p>',
          type: 'success',
          duration: 0
        })
        window.setTimeout(() => {
          if (res.addingResult === 0) {
            if (res.addingSize <= 0) {
              this.$notify({
                title: '新用户导入情况',
                message: '无需导入新用户',
                type: 'success',
                duration: 0
              })
            } else {
              this.$notify({
                title: '新用户导入情况',
                message: res.addingMsg,
                type: 'warning',
                duration: 0
              })
            }
          } else {
            this.$notify({
              title: '新用户导入情况',
              message: '已导入' + res.addingSize + '名新用户',
              type: 'success',
              duration: 0
            })
          }
        }, 0)
        window.setTimeout(() => {
          if (res.removingSize > 0) {
            this.$notify({
              title: '退休离职名单',
              dangerouslyUseHTMLString: true,
              message: '<p>已生成待核实离职退休名单，请下载核实后，再进行批量退休/离职操作：</p>' +
                '<a target="_blank" href="' + res.removingFileUrl + '">' +
                '<strong style="text-decoration: underline">点击下载</strong>' +
                '</a>',
              type: 'success',
              duration: 0
            })
          } else {
            this.$notify({
              title: '退休离职名单',
              message: '无待核实离职退休人员',
              type: 'success',
              duration: 0
            })
          }
        }, 0)
      })
    },
    handleExport() {
      this.dialogExportVisible = true
    },
    doExport(departmentId) {
      if (!departmentId) {
        this.$message({
          message: '请先选择用户名单所属的分局！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '正在导出中，请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      exportUsersToExcel(departmentId).then((response) => {
        this.$notify({
          title: '人员名单导出成功',
          dangerouslyUseHTMLString: true,
          message: '<p>已生成当前人员名单，请下载：</p>' +
            '<a target="_blank" href="' + response.data + '">' +
            '<strong style="text-decoration: underline">点击下载</strong>' +
            '</a>',
          type: 'success',
          duration: 0
        })
        loading.close()
      })
    },
    doLeave() {
      if (!this.tmpOperateDepartmentId) {
        this.$message({
          message: '请先选择要批量操作的分局！',
          type: 'warning',
          duration: 2000
        })
        return
      }
      const filePath = this.filePathTemp
      if (filePath == '' || filePath === null || filePath === undefined) {
        this.$message({
          message: '导入失败，请重新上传文件后再点击导入',
          type: 'error',
          duration: 2000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '数据处理中，请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 15000)
      leaveUsersByExcel(filePath, this.tmpOperateDepartmentId).then((response) => {
        loading.close()
        this.showUsersList()
        this.$notify({
          title: 'Success',
          message: '批量设为离职/退休成功，共更新了' + response.data + '位用户',
          type: 'success',
          duration: 3000
        })
      })
    },
    removeExcel() {
      this.filePathTemp = ''
    },
    uploadExcel() {
      this.filePathTemp = this.$refs.excelUpload.url
    },
    roundPrice
  }
}
</script>

<style lang="less" scoped>
  .el-card {
    margin-bottom: 10px
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
     margin-bottom: 0;
  }
  .info-title{
    font-weight: bolder;
  }
  .user-avatar {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
</style>
